/*
 * @Author: 徐建辰
 * @Date: 2022-04-15 15:26:24
 * @LastEditTime: 2022-04-28 14:19:10
 * @LastEditors: 徐建辰
 * @Description: 监听主题切换，修改ui
 */
import {ref, watch, computed} from 'vue'
import {getItem} from '@/utils/local'
import {APP_THEME} from '@/utils/constant'
import useConfigStore from '@/store/config'

export default function useTheme(darkColor = '#d0d0d0', lightColor = '#fff') {

  const configStore = useConfigStore()
  const theme = ref(getItem(APP_THEME) || 'default')
  const color = ref('')
  const styles = ref('')

  const compTheme = computed(() => configStore.theme)

  watch(theme, newTheme => {
    document.body.setAttribute('data-theme', newTheme)
    configStore.SET_theme(newTheme)
    color.value = getItem(APP_THEME) === 'default' ? lightColor : darkColor
  }, {immediate: true})

  watch(
    () => configStore.theme,
    newTheme => theme.value = newTheme || 'default',
    {
      immediate: true,
      deep: true
    }
  )

  watch(compTheme, newTheme => {
    styles.value = {
      color: newTheme === 'dark' ? '#a3a6ad' : '#000',
      background: newTheme === 'dark' ? '#141414' : '#fafafa'
    }
  }, {immediate: true})

  return {theme, color, styles}
}